<template>
	<v-chart :option="chartOptions" autoresize style="height: 300px;" />
</template>

<script setup>
import { computed } from 'vue'
import VChart from 'vue-echarts'
import * as echarts from 'echarts'

const props = defineProps({ data: Object })

const chartOptions = computed(() => {
	const data = []
	props.data?.matrix?.forEach((row, dayIdx) => {
		row.forEach((val, hourIdx) => {
			data.push([hourIdx, dayIdx, val])
		})
	})
	return {
		title: { text: '异常时段热力图' },
		tooltip: { position: 'top' },
		xAxis: { type: 'category', data: props.data?.labels || [] },
		yAxis: { type: 'category', data: props.data?.days || [] },
		visualMap: {
			min: 0,
			max: 5,
			calculable: true,
			orient: 'horizontal',
			left: 'center',
			bottom: '5%'
		},
		series: [
			{
				type: 'heatmap',
				data,
				label: { show: true },
				emphasis: { itemStyle: { shadowBlur: 10, shadowColor: '#333' } }
			}
		]
	}
})
</script>
